<template>
	<view class="container"> 
		<view class="wallet-bg">
			<view class="wallet-section">
				<view class="wallet-top" style="display: flex;justify-content: space-between;">
					<view style="display: flex;justify-content: space-between;">
						<view>钱包地址:{{user.money_url}}</view>
						<view class="copy" @click="$util.copy(user.money_url)">复制</view>
					</view>
					
					<view class="order-alline-btn" @click="navTo('/otherpages/wallet/commission_list')" style="font-size: 20rpx;">佣金明细＞</view>
				</view>
				<view class="wallet-body">
					<view class="wallet-body-top">
						<view class="wallet-money-box">
							<text class="wallet-money-title">余额(元)</text>
							<text class="wallet-money-number">{{user.balance}}</text>
						</view>
						<view>
							<view class="wallet-withdraw" @click="navTo('/otherpages/wallet/deposit?balance_money='+user.balance_money)">
								提现
							</view>
							<view class="wallet-withdraw" @click="navTo('/otherpages/wallet/recharge')">去充值</view>
						</view>
						
					</view>
					<!-- <view class="anchor-line-body">
						<view class="anchor-line-item" style="width: 100%;">
							<text class="anchor-line-item-title">温馨提示：当前贡献值还需{{1000-user.consume2}}可增加下一个团队点位</text>
						</view>
					</view> -->
					<view class="anchor-line-body">
						<view class="anchor-line-item">
							<text class="anchor-line-item-title">团队人数</text>
							<text class="anchor-line-item-data">{{user.num}}</text>
						</view>
						<view class="anchor-line-item">
							<text class="anchor-line-item-title">业绩</text>
							<text class="anchor-line-item-data">{{user.achievement}}</text>
						</view>
					</view>
					<!-- <view class="anchor-line-body">
						<view class="anchor-line-item">
							<text class="anchor-line-item-title">A({{user.a_num || '0'}}人)</text>
							<text class="anchor-line-item-data">{{user.a_max_level || '普通会员'}}</text>
						</view>
						<view class="anchor-line-item">
							<text class="anchor-line-item-title">B({{user.b_num || '0'}}人)</text>
							<text class="anchor-line-item-data">{{user.b_max_level || '普通会员'}}</text>
						</view>
						<view class="anchor-line-item">
							<text class="anchor-line-item-title">C({{user.c_num || '0'}}人)</text>
							<text class="anchor-line-item-data">{{user.c_max_level || '普通会员'}}</text>
						</view>
					</view> -->
					<view class="anchor-line-body">
						<view class="anchor-line-item">
							<text class="anchor-line-item-title">总佣金</text>
							<text class="anchor-line-item-data">{{user.total_money}}</text>
						</view>
						<view class="anchor-line-item">
							<text class="anchor-line-item-title">总冻结佣金</text>
							<text class="anchor-line-item-data">{{user.total_freeze_money}}</text>
						</view>
					</view>
					<!-- <view class="anchor-line-body">
						<view class="anchor-line-item">
							<text class="anchor-line-item-title">OOY数量</text>
							<text class="anchor-line-item-data">{{user.ooy}}</text>
						</view>
					</view> -->
				</view>
				
			</view>
		</view>
		<view class="from-create-btn-box">
			<view class="from-create-btn" @click="confirm">查看团队</view>
		</view>
	</view>
</template>
<script>  
	import listCell from '@/components/mix-list-cell';
    import {
        mapState 
    } from 'vuex';
    export default {
		components: {
			listCell,
		},
		data(){
			return {
				user:{
					balance:0,
					balance_money:0,
					total_money:0,
					total_freeze_money:0,
					money_url:"",
					achievement:0,
					num:0
				}
				
			}
		},
		onLoad(){

		},
		onShow() {
			this.loadData()
		},
		
        computed: {
			
		},
        methods: {
			async loadData(){
				var _this=this
				this.$http.sendRequest({
					url:"api/member_wallet/info",
					method:"get",
					success:function(res){
						_this.user=res.data.data
					}
				})
			},
			confirm(){
				uni.navigateTo({
					url:"./team"
				})
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url){
				uni.navigateTo({  
					url
				})
			}, 
        }  
    }  
</script>  

<style lang='scss'>
	%flex-center {
	 display:flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	}
	%section {
	  display:flex;
	  justify-content: space-around;
	  align-content: center;
	  background: #fff;
	  border-radius: 20upx;
	}
	.wallet-bg{
		background-image: linear-gradient(#e67817, #FFFFFF);
		padding-top: 32upx;
	}
	.copy {
		font-size: 24rpx;
		display: inline-block;
		color: #666;
		background: #f7f7f7;
		line-height: 1;
		padding: 6rpx 14rpx;
		margin-left: 10rpx;
		border-radius: 18rpx;
		border: 0.5px solid #666;
	}
	.wallet-section{
		margin: 0 32upx 32upx 32upx;
		background-color: #ffffff;
		border-radius: 20upx;
		padding: 20upx 0;
		.wallet-top{
			padding:40upx;
			border-bottom: 1rpx solid #F0F1F2;
			font-size: 28upx;
			.order-alline-btn{
				float: right;
				color: #e67817;
			}
		}
		.wallet-body{
			.wallet-body-top{
				padding: 0 40upx;
				display: flex;
				flex-direction: row;
				border-bottom: 1rpx solid #F0F1F2;
				.wallet-money-box{
					margin: 20upx 0;
					width: 380upx;
					.wallet-money-title{
						display: block;
						font-size: 32upx;
						margin-bottom: 20upx;
						color: #999999;
					}
					.wallet-money-number{
						color: #333333;
						font-size: 48upx;
					}
				}
				.wallet-withdraw{
					width: 120upx;
					height: 50upx;
					text-align: center;
					line-height: 50upx;
					background-color: #e67817;
					color: #ffffff;
					border-radius: 25upx;
					margin: 20upx 0 0 20upx;
					font-size: 25rpx;
				}
			}
			.anchor-line-body{
				display: flex;
				margin-top: 20upx;
				.anchor-line-item{
					width: 50%;
					text-align: center;
					line-height: 60upx;
					/*** 主播权益 ***/
					.anchor-line-item-title{
						font-size: 24upx;
						color: #999999;
						display: block;
					}
					.anchor-line-item-data{
						font-size: 32upx;
						color: #333333;
					}
				}
			}
		}
		.wallet-note{
			margin: 60upx 40upx 20upx 40upx;
			line-height: 50upx;
			.wallet-note-title{
				margin-bottom: 40upx;
			}
		}
	}
	.start-pop{
		width: 600upx;
		height: 678upx;
	}
	.start-pop image{
		display: initial;
	}
	.from-create-btn-box{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #FFFFFF;
		.from-create-btn{
			margin: 20upx;
			height: 80upx;
			width: 710upx;
			line-height: 80upx;
			border-radius: 80upx;
			color: #FFFFFF;
			text-align: center;
			background: #e67817;
		}
	}
	.recharge{
		padding: 5rpx 10rpx;
		background-color: #e67817;
		color: #ffffff;
		border-radius: 15rpx;
		font-size: 29rpx;
		margin-left: 10rpx;
	}
</style>
